<template>
  <div v-if="Bos" class="cent">
    <div class="cont">
      <div class="top">
        <span class="l1" v-text="message"></span>
        <span class="l2" @click="sc">X</span>
      </div>
      <p v-text="message_2"></p>
      <div class="l3" v-text="confirm" @click="fn"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'messageBox',
  data() {
    return {
      Bos: true,
      message: '标题名称',
      message_2: '这是一段内容',
      confirm: '确认',
    };
  },
  methods: {
    sc() {
      this.Bos = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.cent{
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  opacity: .5;
  .cont{
    opacity: 1;
    width: 280px;
    height: 150px;
    background-color: #fff;
    position: fixed;
    top: 25%;
    left: 50%;
    z-index: 999;
    padding: 5px;
   .l1{
     width: 90%;
     display: inline-block;
   }
    .l3{
      width: 50px;
      line-height: 40px;
      margin: 57px auto;
      text-align: center;
      background-color: #abdcff;
    }
  }
}
</style>
